<template>
  <div class="vcm-slideview" v-show="show" :style="{ 'z-index': zIndex }">
    <transition name="fade">
      <div class="vcm-slideview-mask" v-show="show" @click="close"></div>
    </transition>
    <transition name="slide">
      <div class="vcm-slideview-show" v-show="show">
        <template>
          <p v-for="(val, key) in message" :key="key">
            <el-row :span="12"
              ><div class="grid-content">
                <el-tag>{{ key }}</el-tag>
              </div></el-row
            >
            <el-row :span="12"
              ><div class="grid-content" style="margin-top: 20px">
                {{ val }}
              </div></el-row
            >
          </p>
        </template>
      </div>
    </transition>
  </div>
</template>

<script type="text/javascript">
import { getMaxIndex } from "@/utils/index";
export default {
  name: "SlideView", // 详情滑动view
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    message: {
      type: Object,
    },
  },
  data() {
    return {
      zIndex: getMaxIndex(),
    };
  },
  computed: {},
  watch: {},
  methods: {
    close() {
      this.$emit("update:showFlag", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  padding-left: 20px;
}
.slide-enter,
.slide-leave {
  transform: translateX(100%);
}
.slide-enter-to,
.slide-leave {
  transform: translateX(0);
}

.slide-enter-active,
.slide-enter-leave {
  transition: transform 0.6s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.fade-enter-active,
.fade-enter-leave {
  transition: opacity 0.6s ease;
}

.vcm-slideview {
  width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  .vcm-slideview-show {
    width: 50%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background-color: white;
    padding-left: 20px;
  }
  .vcm-slideview-mask {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
